<template>
  <div :style="{width: `${props.size}px`, height: `${props.size}px`, borderRadius: '50%', overflow: 'hidden'}">
    <div v-if="props.modelValue && isdefult(props.modelValue)"
      class="w-full h-full flex items-center justify-items-center" :style="{ background: props.modelValue }">
      <div class="flex-1 text-white text-center">
        {{ props.name ? props.name.charAt(0) : "#" }}
      </div>
    </div>
    <img v-else class="w-full h-full object-cover" :src="props.modelValue" />
  </div>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    modelValue?: string;
    name?: string;
    size?: number;
  }>(), { size: 35 });

const isdefult = (color: string) => {
  if (color.charAt(0) == "#") return true;
  else false;
};
</script>

<style lang="less" scoped></style>
